#@adminLayout()
#define main()
<script src="/assets/nestable/role_nestable.js?v=#(resource_version)"></script>
<div class="card">
    <div class="card-header">
        <h2 class="card-title">角色管理 / 分配权限</h2>
        <br/>
        <small>
            <lable>
                <a data-pjax href="/admin/sys/role" class="btn btn-secondary"><i class="zmdi zmdi-arrow-back"></i>返回</a>
            </lable>
        </small>
    </div>
    <div class="row">
        <div class="col-sm-1"></div>
        <div class="col-sm-8">
            <div class="card-block">
                #if(role)正在为&emsp;<strong style="color: red;">#(role.name)</strong>&emsp;角色分配权限#end
                <div class="col-sm-6">
                    <div class=" form-group--select">
                        <lable>选择模块</lable>
                        <select class="select2 m-b-10 select2-multiple" style="width: 100%" multiple="multiple"
                                id="taxonomySelect" name="menu.taxId"
                                data-placeholder="多向选择">
                            #for(mapItem : permissionMap)
                            #for(actionNote:actions)
                            #if(mapItem.key==actionNote.actionKey)
                            <option value="#(actionNote.id??)"
                                    #for(action:actionNotes)#if(actionNote.id==action.id)selected#end#end>
                                #(actionNote.notes)
                            </option>
                            #end
                            #end
                            #end
                        </select>
                    </div>
                </div>
                <div class="myadmin-dd dd" id="nestable">
                    <ol class="dd-list">
                        #for(mapItem : permissionMap)
                        #if(actionNotes.size()>0)
                        #for(actionNote:actionNotes)
                        #if(mapItem.key==actionNote.actionKey)
                        #if(actionNote!=null)
                        #if(actionNote.id==actionNote.id)
                        #@list()
                        #end
                        #else
                        #@list()
                        #end
                        #end
                        #end
                        #else
                        #for(actionNote:notes)
                        #if(mapItem.key==actionNote.actionKey)
                        #@list()
                        #end
                        #end
                        #end
                        #end
                    </ol>
                </div>
            </div>
        </div>
        <div class="col-sm-3" style="color: red;">
            左边点击单条操作，添加所有以及删除所有<br/>
            超级管理员无法为自己添加和删除权限操作
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('body>.select2-container.select2-container--default.select2-container--open').remove();
        $(".select2").select2();
        initSwitchInput(prepareAction);
        $('#nestable').nestable({
            group: 1
        }).on('change');

        $('#nestable-menu').on('click', function (e) {
            var target = $(e.target),
                action = target.data('action');
            if (action === 'expand-all') {
                $('.dd').nestable('expandAll');
            }
            if (action === 'collapse-all') {
                $('.dd').nestable('collapseAll');
            }
        });
        $('#taxonomySelect').change(function () {
            var nums = $(this).val(), turnNum = function (nums) {
                for (let i = 0; i < nums.length; i++) {
                    nums[i] = parseInt(nums[i])
                }
                return nums;
            }
            $.pjax({
                url: '/admin/sys/role/assignPermissions?id=#(role.id)&mode=' + turnNum(nums),
                container: '#pjax-container'
            });
        })
    });

    function prepareAction($this, state) {
        return {
            url: state ? "/admin/sys/role/addPermission" : "/admin/sys/role/deletePermission",
            data: {
                roleId: $this.attr("data-role-id"),
                permissionId: $this.attr("data-permission-id")
            }
        }
    }


    /*添加所有*/
    function addAll(a, b, t) {
        var items = $(t).parent().next().find("input");
        var checkID = [];
        for (k in items) {
            checkID.push(items[k].value);
        }
        $.post("/admin/sys/role/addPermission", {'roleId': a, 'permissionId': checkID.toString()}, function (ret) {
            if (ret.state == 'ok') {
                showMsg(0, ret.msg);
                $.each(items, function (i, v) {
                    $(v).attr("checked", "checked")
                })
                //$.pjax.reload('#pjax-container', {});
            } else {
                showMsg(3, ret.msg);
            }
        })
    }

    /*删除所有*/
    function delAll(a, b, t) {
        var items = $(t).parent().next().find("input");
        var checkID = [];
        for (k in items) {
            checkID.push(items[k].value);
        }
        $.post("/admin/sys/role/deletePermission", {'roleId': a, 'permissionId': checkID.toString()}, function (ret) {
            if (ret.state == 'ok') {
                showMsg(0, ret.msg);
                //$.pjax.reload('#pjax-container', {});
                $.each(items, function (i, v) {
                    $(v).removeAttr("checked")
                })
            } else {
                showMsg(3, ret.msg);
            }
        })
    }
</script>
#end
#define list()
<li class="dd-item">
    <div class="dd-handle">
        #(actionNote.notes)
        <button class="btn btn-secondary btn--icon-text btn-sm waves-effect"
                onclick="addAll(#(role.id),#(for.outer.index),this)"><i
                class="zmdi zmdi-check"></i>
            添加所有
        </button>
        <button class="btn btn-secondary btn--icon-text btn-sm waves-effect"
                onclick="delAll(#(role.id),#(for.outer.index),this)"><i
                class="zmdi zmdi-close"></i>
            删除所有
        </button>

    </div>
    <ol class="dd-list">
        #for(x : mapItem.value)
        <li class="dd-item">
            <div class="dd-handle">
                <div class="toggle-switch">
                    <input data-role-id="#(role.id)"
                           data-permission-id="#(x.id)"
                           value="#(x.id)"
                           #if(x.assigned) checked #end
                           type="checkbox" name="checkBox#(for.outer.index)"
                           class="toggle-switch__checkbox">
                    <i class="toggle-switch__helper"></i>
                </div>
                &emsp;
                #(x.remark)
            </div>
        </li>
        #end
    </ol>
</li>
#end